<template>
  <div>
    <div class="itemlist">
      <bScroll :height="height">
        <div class="item" v-for="item in shopOrderList" :key="item.id">
          <div class="item_top">
            <div class="item_top_left"></div>
            <div class="item_top_right">
              <span>安德莉亚 (洛阳泉舜店)</span>
            </div>
          </div>

          <div
            class="item_bomm"
            v-for="(orderlist, index) in item.orderlist"
            :key="index"
          >
            <div class="item_bomm_left">
              <img :src="orderlist.imageurl" alt="" />
            </div>
            <div class="item_bomm_center">
              <div class="van-ellipsis">{{ orderlist.name }}</div>
              <p>{{ orderlist.categoryname }}</p>
              <span style="display: block; margin-top: 12px"
                >￥{{ orderlist.stock }}.00*{{ orderlist.number }}</span
              >
            </div>
          </div>
          <div class="item_qur_btn">
            <slot>
              <van-button
                v-if="mytype == 0"
                round
                class="btn"
                size="small"
                :to="`/index/order?oid=${item.id}`"
                color="#dcb884"
                >去付款</van-button
              >
              <van-button
                v-else-if="mytype == 1"
                round
                class="btn"
                size="small"
                @click="ChangePayState(item.id, item.createtime)"
                color="#dcb884"
                >确认收货</van-button
              >
              <van-button v-else round class="btn" size="small" color="#dcb884"
                >评价</van-button
              >
            </slot>
          </div>
        </div>
      </bScroll>
    </div>
  </div>
</template>

<script>
import bScroll from "@/components/bScroll/bScroll.vue";
import { Dialog } from "vant";
import { UpOrderStateByOid } from "@/network/order/order.js";
export default {
  props: ["leftshopList", "centershopList", "rightshopList", "mytype"],
  components: {
    bScroll,
  },
  data() {
    return {
      shopOrderList: [],
      height:"height:144vw",
    };
  },
  activated() {
    this.LoadList(this.$route.query.type * 1);
  },
  created() {
    this.LoadList(this.$route.query.type * 1);
  },
  methods: {
    LoadList(type) {
      if (type == 0) {
        this.shopOrderList = this.leftshopList;
      }
      if (type == 1) {
        this.shopOrderList = this.centershopList;
      }
      if (type == 2) {
        this.shopOrderList = this.rightshopList;
      }
    },
    ChangePayState(oid, time) {
      let _this = this;
      Dialog.confirm({
        title: "确认收货",
        message: `您的取货时间是：${
          time == null ? "到店时间" : time
        }</br>请确认订单已收到！！！！`,
      })
        .then(async function () {
          const { data: res } = await UpOrderStateByOid({ oid: oid });
          if (res.message == "success") {
            this.LoadList(this.$route.query.type * 1);
            _this.$router.go(0);
          }
        })
        .catch(() => {});
    },
  },
  watch: {
    mytype: function () {
      this.$nextTick(() => {
        this.LoadList(this.mytype);
        this.$children[0].scroll.refresh()
      });
    },
    shopOrderList(){
       this.$nextTick(() => {
         setTimeout(()=>{
             this.$children[0].scroll.refresh()
         },300)
         
      });
    }
  },
};
</script>
<style scoped lang="less">
@import "../../assets/css/index.less";

.itemlist {
  width: 100vw;
  height: 170vw;
  margin-top: 42 * @vw;
  background-color: #f5f5f5;
  padding-top: 1px;
  padding-bottom: 120 * @vh;
  .item {
    width: 1382 * @vw;
    margin: 0 auto;
    margin-top: 60 * @vw;
    padding-bottom: 1 * @vw;
    background-color: #ffffff;
    .item_top {
      height: 120 * @vw;
      display: flex;
      .item_top_left {
        height: 100%;
        width: 20%;
        background-image: url("../../assets/dangao.jpg");
        background-size: 40% 80%;
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
      }
      .item_top_right {
        padding-top: 12 * @vw;
      }
    }
    .item_bomm {
      display: flex;
      .item_bomm_left {
        padding: 4%;
        width: 25%;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .item_bomm_center {
        width: 60%;
        padding-top: 40 * @vw;
        span {
          font-size: 120 * @vh;
        }
        p {
          margin-top: 20 * @vw;
          margin-bottom: 0;
          font-size: 90 * @vh;
        }
      }

      .item_bomm_right {
        width: 35%;
        text-align: center;
        .btn {
          margin-top: 360 * @vh;
        }
      }
    }
    .item_qur_btn {
      margin-bottom: 30 * @vw;
      width: 50vw;
      margin-left: 1020 * @vw;
    }
  }
}
</style>